<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float: left">查询申请信息</span>
      </div>
      <div>
        <tr>
          <td>生产部门</td>
          <td>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in drop_down"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </td>
          <td>年份</td>
          <td>
            <el-select v-model="year" placeholder="请选择">
              <el-option :label="2020" :value="2020"> </el-option>
              <el-option :label="2021" :value="2021"> </el-option>
              <el-option :label="2022" :value="2022"> </el-option>
              <el-option :label="2023" :value="2023"> </el-option>
              <el-option :label="2024" :value="2024"> </el-option>
            </el-select>
          </td>
          <td>月份</td>
          <td>
            <el-select v-model="month" placeholder="请选择">
              <el-option :label="1" :value="1"> </el-option>
              <el-option :label="2" :value="2"> </el-option>
              <el-option :label="3" :value="3"> </el-option>
              <el-option :label="4" :value="4"> </el-option>
              <el-option :label="5" :value="5"> </el-option>
              <el-option :label="6" :value="6"> </el-option>
              <el-option :label="7" :value="7"> </el-option>
              <el-option :label="8" :value="8"> </el-option>
              <el-option :label="9" :value="9"> </el-option>
              <el-option :label="10" :value="10"> </el-option>
              <el-option :label="11" :value="11"> </el-option>
              <el-option :label="12" :value="12"> </el-option>
            </el-select>
          </td>
          <td><el-button type="success" @click="GetAllCompanyActivitiesPo">查询</el-button></td>
        </tr>
      </div>
      <h3 style="float: left;color:blue">公司活动申请列表</h3>
    </el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="未处理" name="1">
        <el-table :data="tableData" style="width: 100%"  ref="multipleTable">
           <el-table-column
      type="selection"
      width="55">
    </el-table-column>
          <el-table-column prop="company_activities_id" label="编号" width="50">
          </el-table-column>
          <el-table-column
            prop="creator_date"
            label="申请时间"
            :formatter="formatterdate"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="creator_name" label="申请人">
          </el-table-column>
          <el-table-column prop="apply_reason" label="活动事由">
          </el-table-column>
          <el-table-column
            prop="create_time"
            :formatter="formatterdateTwo"
            label="请假开始时间"
          >
          </el-table-column>
          <el-table-column
            prop="end_time"
            :formatter="formatterdateTwo"
            label="请假结束时间"
          >
          </el-table-column>
          <el-table-column prop="attendance_statistics" label="考勤统计(小时)">
          </el-table-column>
           <el-table-column prop="drive_mileage" label="公里数">
          </el-table-column>
          <el-table-column prop="note_information" label="备注">
          </el-table-column>
          <el-table-column prop="note_information"  width="180" label="操作">
         <template slot-scope="scope">
            <el-button type="success" @click="CompanyActivitiesPoAudit(1,scope.row.company_activities_id)">通过</el-button> <el-button @click="CompanyActivitiesPoAudit(2,scope.row.company_activities_id)" type="danger">驳回</el-button>
         </template> 
         </el-table-column>
           <el-table-column prop="note_information"  width="180" label="编辑">
             <template slot-scope="scope">
            <el-button @click="Jump(scope.row.company_activities_id,scope.row.application_type)">编辑</el-button>
        </template>
         </el-table-column>
        </el-table>
        <el-pagination
          @size-change="GetAllCompanyActivitiesPo"
          @current-change="GetAllCompanyActivitiesPo"
          :current-page.sync="pageIndex"
          :page-sizes="[10, 15, 20, 30]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
         <el-button type="danger" style="float:left" @click="CompanyActivitiesPoDelete" >删除</el-button>
      </el-tab-pane>
      <!-- ----------------加入判断------------------------------------------------------------------------------- -->
      <el-tab-pane label="已处理" name="2"> 
         <el-table :data="tableData2" style="width: 100%"  ref="multipleTable2">
            <el-table-column
      type="selection"
      width="55">
    </el-table-column>
          <el-table-column prop="company_activities_id" label="编号" width="150">
          </el-table-column>
          <el-table-column
            prop="creator_date"
            label="申请时间"
            :formatter="formatterdate"
            width="210"
          >
          </el-table-column>
          <el-table-column prop="creator_name" label="申请人">
          </el-table-column>
          <el-table-column prop="apply_reason" label="活动事由">
          </el-table-column>
          <el-table-column
            prop="create_time"
            :formatter="formatterdateTwo"
            label="请假开始时间"
             width="200px"
          >
          </el-table-column>
          <el-table-column
            prop="end_time"
            :formatter="formatterdateTwo"
            label="请假结束时间"
            width="200px"
          >
          </el-table-column>
          <el-table-column prop="attendance_statistics" label="考勤统计(小时)">
          </el-table-column>
           <el-table-column prop="drive_mileage" label="公里数">
          </el-table-column>
          <el-table-column prop="note_information" label="备注">
          </el-table-column>
            <el-table-column prop="whether_through" label="状态">
             <template slot-scope="scope">
             <el-tag v-if="scope.row.whether_through==1" effect="dark" type="success">通过</el-tag>
             <el-tag v-else type="danger" effect="dark">未通过</el-tag>
             </template>
          </el-table-column>
           <el-table-column prop="modifi_name" label="审批人">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="GetAllCompanyActivitiesPo"
          @current-change="GetAllCompanyActivitiesPo"
          :current-page.sync="pageIndex2"
          :page-sizes="[10, 15, 20, 30]"
          :page-size.sync="pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount2"
        >
        </el-pagination>
         <el-button type="danger" style="float:left" @click="CompanyActivitiesPoDelete2" >删除</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { GetAllCompanyActivitiesPo,CompanyActivitiesPoAudit,CompanyActivitiesPoDelete,GetAllDepartment } from "./AttendanceManagementApi";
import moment from "moment";
export default {
  data() {
    return {
      activeName: "1",
      tableData: [],
       tableData2:[],
      drop_down: [],
      depname: null,
      year: null,
      month: null,
      pageIndex: 1,
      pageSize: 20,
      pageIndex2: 1,
      pageSize2: 20,
      totalCount: 0,
      totalCount2: 0,
    };
  },
  created() {
    this.GetAllCompanyActivitiesPo();
    this.GetAllDepartment();
  },
  methods: {
    formatterdate(row, column) {
      //年月日
      var value = row[column.property];
      if (value != null) {
        return moment(value).format("yyyy-MM-DD");
      }
    },
    formatterdateTwo(row, column) {
      //年月日时分秒
      var value = row[column.property];
      if (value != null) {
        return moment(value).format("yyyy-MM-DD HH-mm-ss");
      }
    },
    GetAllCompanyActivitiesPo() {
      GetAllCompanyActivitiesPo(
        this.depname,
        this.year,
        this.month,
        this.pageIndex,
        this.pageSize
      ).then((res) => {
        this.tableData = res.data.a;
        this.tableData2 = res.data.b;
        this.totalCount = res.data.totalCount;
        this.totalCount2 = res.data.totalCount2;
      });
    },
     CompanyActivitiesPoAudit(status,id){
      if(confirm("是否确认审核?")==false)return;
      CompanyActivitiesPoAudit(status,id).then((res)=>{
        if(res.data>0){
          alert("审核成功");
          this.$router.go("/company_activities_list")
        }
      })
    },
     CompanyActivitiesPoDelete(){ 
      if(confirm("是否确认删除")==false)return;
      var arr=this.$refs.multipleTable.selection;
      var ids=new Array();
      arr.forEach(r => {
          ids.push(r.company_activities_id)
      });
      if(ids.length==0){
        alert("请选择要删除的申请")
        return;
      }
    CompanyActivitiesPoDelete(ids).then((res)=>{
      if(res.data>0){
        alert("删除成功");
        this.$router.go()
      }
      else{
        alert("该信息已审核,请联系考勤员删除")
      }
    })
    },
     CompanyActivitiesPoDelete2(){ 
         if(confirm("是否确认删除")==false)return;
      var arr=this.$refs.multipleTable2.selection;
      var ids=new Array();
      arr.forEach(r => {
          ids.push(r.company_activities_id)
      });
       if(ids.length==0){
        alert("请选择要删除的申请")
        return;
      }
    CompanyActivitiesPoDelete(ids).then((res)=>{
      if(res.data>0){
        alert("删除成功");
      }
      else{
        alert("该信息已审核,请联系考勤员删除")
      }
    })
    },
     GetAllDepartment(){
      GetAllDepartment().then((res)=>{
      this.drop_down=res.data;
      })
    },
    Jump(id,application_type_edit){
      this.$router.push("/sys/attendance_apply_edit/"+id+"/"+application_type_edit)
    }
  },
};
</script>